import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useTheme, type Theme } from "~/components/theme-provider"
import { Moon, Sun, SunMoon } from "lucide-react"
export function ThemeTrigger() {
  const { theme, setTheme } = useTheme()
  const ThemeIconMap: Record<Theme, { title: string, icon: React.ElementType }> = {
    'system': { title: '系统主题', icon: SunMoon },
    'dark': { title: '暗色主题', icon: Moon },
    'light': { title: '亮色主题', icon: Sun },
  }

  const ThemeIconMeta = ThemeIconMap[theme]
  const ThemeIcon = ThemeIconMeta.icon
  // 仅开发模式可使用主题切换功能
  if (import.meta.env.PROD) return null
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button title={`现在是${ThemeIconMeta.title}`} className="dark:bg-black/60" variant="outline">
          {ThemeIcon && <ThemeIcon className="size-4" />}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-fit" align="start">
        <DropdownMenuLabel className="text-sm">主题切换</DropdownMenuLabel>
        <DropdownMenuGroup>
          <DropdownMenuItem onClick={() => setTheme('system')}>系统主题<SunMoon className="size-4" /></DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem onClick={() => setTheme('light')}>亮色主题<Sun className="size-4" /></DropdownMenuItem>
          <DropdownMenuItem onClick={() => setTheme('dark')}>暗色主题<Moon className="size-4" /></DropdownMenuItem>
        </DropdownMenuGroup>

      </DropdownMenuContent>
    </DropdownMenu>
  )
}
